
   <!-- 城市联动组件 -->
<template>
    <div class="city-select">
        <div>
            <!-- 选择省份时：更新市、区数据 -->
            <select v-model="currentProvince" @change="updateCity() ">
                <option v-for="(item, index) in list" :key="index">{{ item.province }}</option>
            </select>
            <select v-model="city">
                <option v-for="(item, index) in cityList" :key="index">{{ item.city }}</option>
            </select>
        </div>
    </div>
</template>
  
   
<script lang="ts">

interface cityType {
    id: number;
    city: string;
}

import { defineComponent } from 'vue';
export default defineComponent({
    name: 'city-select',
    data() {
        return {
            list: [{
                id: 101,
                province: "四川省",
                citys: [{
                    id: 1011,
                    city: "成都"
                }, {
                    id: 1012,
                    city: "绵阳"
                }, {
                    id: 1013,
                    city: "宜宾"
                }, {
                    id: 1014,
                    city: "乐山"
                }]
            }, {
                id: 102,
                province: "贵州省",
                citys: [{
                    id: 1021,
                    city: "贵阳"
                }, {
                    id: 1022,
                    city: "六盘水"
                }, {
                    id: 1023,
                    city: "黔南"
                }]
            }, {
                id: 103,
                province: "云南省",
                citys: [{
                    id: 1031,
                    city: "昆明"
                }, {
                    id: 1032,
                    city: "大理"
                }, {
                    id: 1033,
                    city: "丽江"
                }]
            },
            {
                id: 104,
                province: "江苏省",
                citys: [{
                    id: 1041,
                    city: "浙江"
                }, {
                    id: 1042,
                    city: "温州"
                }, {
                    id: 1043,
                    city: "江城"
                },

                ]
            },
            {
                id: 105,
                province: "北京",
                citys: [{
                    id: 1051,
                    city: "朝阳"
                }, {
                    id: 1052,
                    city: "问问"
                }, {
                    id: 1053,
                    city: "固定"
                },

                ]
            },
            {
                id: 106,
                province: "甘肃",
                citys: [{
                    id: 1063,
                    city: "丽江"
                }, {
                    id: 1062,
                    city: "广泛"
                }, {
                    id: 1063,
                    city: "丽江"
                },

                ]
            },
            {
                id: 107,
                province: "重庆",
                citys: [{
                    id: 1071,
                    city: "方法"
                }, {
                    id: 1072,
                    city: "含税"
                }, {
                    id: 1073,
                    city: "达到"
                },

                ]
            }
            ], // 总数据
            currentProvince: '北京', // 省
            cityList: [] as Array<cityType>, // 市数据,
            city: '朝阳', // 市
        }
    },
    methods: {
        // 根据省的选择更新市数据
        updateCity() {
            this.list.forEach((item) => {
                if (item.province === this.currentProvince) {
                    // console.log(item.citys)
                    this.cityList = item.citys
                }
            })
            //定义一个空数组，将匹配到的省所对应的市追加到空数组中，再循环这个新的数组
            this.city = this.cityList[0].city
        },
    },
    mounted() {
        //挂载就执行一次
        this.updateCity()
    },
})

</script>
   
<style lang="scss" scoped>
.city-select {
    line-height: 32px;
    height: 30px;
    text-align: center;
    padding: 0 10px;
    margin-right: 15px;
}
</style>